// 获取DOM元素
const chatDiv = document.getElementById('chat');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');

let reader; // 用于存储响应的阅读器，以便可以停止读取

// 格式化代码块的函数
function formatCodeBlocks(text) {
  // 正则表达式匹配代码块
  const codeBlockRegex = /```(\w*)?\n?([\s\S]*?)```/g;
  return text.replace(codeBlockRegex, (match, p1, p2) => {
    // p1 是语言标识，p2 是代码本身
    const language = p1 ? p1.trim() : 'plaintext'; // 如果没有指定语言，默认为纯文本
    const code = p2.trim();
    // 返回格式化的HTML代码块
    return `<pre class="code-block ${language}"><code>${code}</code></pre>`;
  });
}

// 发送按钮点击事件
sendBtn.onclick = async () => {
  const message = userInput.value.trim();
  if (message === "") return;

  // 显示用户消息
  const userMessageDiv = document.createElement('div');
  userMessageDiv.className = 'chat-message';

  const userText = document.createElement('div');
  userText.className = 'user-message';
  userText.textContent = ` ${message}`;
  userMessageDiv.appendChild(userText);

  const userAvatar = document.createElement('img');
  userAvatar.src = '../static/images/user1.jpg';
  userAvatar.className = 'avatar';
  userMessageDiv.appendChild(userAvatar);

  chatDiv.appendChild(userMessageDiv);
  chatDiv.scrollTop = chatDiv.scrollHeight; // 滚动到底部

  // 清空输入框
  userInput.value = "";
  userInput.focus();

  // 发送请求并处理响应
  try {
    const response = await fetch('/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
    });

    if (!response.ok) throw new Error('网络响应错误');

    // 创建一个读取器来处理流式响应
    reader = response.body.getReader();
    let decoder = new TextDecoder('utf-8');
    let aiResponse = '';

    // 显示AI的响应
    const aiMessageDiv = document.createElement('div');
    aiMessageDiv.className = 'chat-message';

    const aiAvatar = document.createElement('img');
    aiAvatar.src = '../static/images/logo.png';
    aiAvatar.className = 'avatar';
    aiMessageDiv.appendChild(aiAvatar);

    const aiText = document.createElement('div');
    aiText.className = 'ai-message';
    aiMessageDiv.appendChild(aiText);
    chatDiv.appendChild(aiMessageDiv);

    // 读取数据并更新AI消息
    const readAndDisplayAIResponse = async () => {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          // AI消息自然输出完毕，恢复按钮原样
          sendBtn.textContent = '发送';
          break;
        }
        const textChunk = decoder.decode(value, { stream: true });
        const lines = textChunk.split('\n').filter(line => line.startsWith('data: '));
        for (const line of lines) {
          const data = line.replace('data: ', '').trim();
          const chunk = JSON.parse(data);
          if (chunk.response) {
            aiResponse += chunk.response;
            // 处理加粗格式和代码格式化
            const formattedResponse = formatCodeBlocks(aiResponse.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'));
            aiText.innerHTML = formattedResponse.split('\n').join('<br>'); // 将换行符转换为 <br> 标签
            chatDiv.scrollTop = chatDiv.scrollHeight; // 滚动到底部
          }
        }
      }
    };

    // 启动AI响应读取
    readAndDisplayAIResponse();

    // 改变按钮文本为“停止输出”
    sendBtn.textContent = '停止输出';

  } catch (error) {
    console.error('请求失败:', error);
    alert('无法发送消息，请稍后再试。');
  }
};

// 按下Enter键时触发发送按钮点击事件
userInput.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    sendBtn.click();
  }
});

// 停止输出AI消息
sendBtn.addEventListener('click', function() {
  if (sendBtn.textContent === '停止输出') {
    // 停止读取流
    if (reader) {
      reader.cancel();
      // 立即恢复按钮原样
      sendBtn.textContent = '发送';
    }
  }
});